<template>
	<view class="page">
		<pageheader :setting="settingdata"></pageheader>
		<view class="now_position">
			<u-icon name="map" color="rgb(44,186,151)" size="30"></u-icon>
			<text>定位城市：{{city}}</text>
		</view>
		<view class="hotscity">
			<text>热门城市</text>
			<view class="hotsbox">
				<block v-for="item in hotcity">
					<view class="hotsone" @click="choosethis(item.name,item.lat,item.lng)">{{item.name}}</view>
				</block>
			</view>
		</view>
		<view class="citys">
			<u-index-list :scrollTop="scrollTop" :index-list="indexList" :offset-top="120">
				<view v-for="(item, index) in list" :key="index">
					<u-index-anchor :index="item.letter" />
					<block v-for="(item2,index2) in item.data" :key="index2">
						<view class="city_one" @click="choosethis(item2.name,item2.lat,item2.lng)">
							<text :class="item.name==city?'city_nameOn':'city_name'">{{item2.name}}</text>
							<u-icon v-if="item.name==city" name="checkbox-mark" color="rgb(44,186,151)" size="28"></u-icon>
						</view>
					</block>
				</view>
			</u-index-list>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				city: "",
				settingdata: {
					name: '切换城市',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "cityposition"
				},
				hotcity:[],
				citylist: [],
				// 使用插件
				scrollTop: 0,
				indexList: [],
				list: [],
				navH:0,
			}
		},
		onLoad(e) {
			_this = this
			// 获取数据
			if (wx.getStorageSync('address')) {
				_this.city = wx.getStorageSync('address').city
			}
			_this.getdata()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			getdata() {
				_this.$api.get("getcity", {}).then(data => {
					_this.hotcity=data.hotcity
					_this.citylist = data.selectcity
					// console.log(data)
					  for( let key in data.selectcity ){
						   _this.indexList.push(key)
						//   //遍历对象属性值
						  let newdata=[]
						  data.selectcity[key].forEach(item=>{
							  newdata.push({name:item.name,lat:item.lat,lng:item.lng})
						  })
						  _this.list.push({letter:key,data:newdata})
						}
				});
			},
			choosethis: function(city,lat,long) {
				_this.city=city
				wx.setStorageSync("address",{"city":city,"lat":lat,"long":long})
				wx.setStorageSync("index_onShow",true)
				uni.showToast({
					icon: "none",
					title: '切换到'+city
				})
				setTimeout(function() {
					uni.navigateBack({delta: 1})
				},300)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f2f2f2;
		// height: 100vh;
		display: flex;
		flex-direction: column;

		.now_position {
			margin-top: 10rpx;
			padding: 28rpx 49rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #fff;
			border-bottom: 2rpx solid #f2f2f2;

			text {
				margin-left: 13rpx;
				color: #333;
				font-size: 26rpx;
			}
		}

		.hotscity {
			padding: 17rpx 32rpx 32rpx 16rpx;
			display: flex;
			flex-direction: column;
			background-color: #f2f2f2;

			text {
				font-size: 26rpx;
				color: #999999;
			}

			.hotsbox {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.hotsone {
					width: 150rpx;
					height: 70rpx;
					border-radius: 5rpx;
					text-align: center;
					line-height: 70rpx;
					background-color: #fff;
					color: #222222;
					font-size: 28rpx;
					margin: 20rpx 0 0 20rpx;
				}
			}
		}

		.citys {
			background-color: #fff;
			display: flex;
			flex-direction: column;
			overflow-y: auto;
			flex: 1;

			.indextag {
				padding: 14rpx 50rpx;
				background-color: #F1F1F1;
				font-size: 28rpx;
				color: #333;
			}

			.city_one {
				padding: 24rpx 50rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.city_name {
					font-size: 28rpx;
					color: #333;
				}

				.city_nameOn {
					font-size: 28rpx;
					color: rgb(44, 186, 151);
				}
			}
		}
	}
</style>
